<template>
  <a-form class="ant-advanced-search-form">
    <a-row :gutter="24">
      <a-col v-for="(item, index) in paramsCmd" :key="index" :span="6">
        <a-form-item :label="item.name">
          <a-input v-model="item.value" placeholder="请填写" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" :style="{ textAlign: 'right' }">
        <a-space>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
            获取
          </a-button>
          <a-button @click="commit"> 设置 </a-button>
          <a-button @click="commitAll"> 应用于在线智能箱 </a-button>
        </a-space>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import { ctrlService } from "@/services/ctrl.js";
export default {
  name: "LimitCfg",
  data() {
    return {
      expand: true,
      paramsCmd: [
        { id: "AC220 min", name: "市电欠压阈值", value: "" },
        { id: "AC220 max", name: "市电过压阈值", value: "" },
        { id: "DC12 min", name: "12V欠压阈值", value: "" },
        { id: "DC12 max", name: "12V过压阈值", value: "" },
        { id: "AC24 min", name: "24V欠压阈值", value: "" },
        { id: "AC24 max", name: "24V过压阈值", value: "" },
        { id: "Tem min", name: "温度过低阈值", value: "" },
        { id: "Tem max", name: "温度过高阈值", value: "" },
        { id: "Hum min", name: "湿度过低阈值", value: "" },
        { id: "Hum max", name: "湿度过高阈值", value: "" },
        { id: "Heat start", name: "加热器启动温度", value: "" },
        { id: "Heat stop", name: "加热器停止温度", value: "" },
        { id: "Fan start", name: "风扇启动温度", value: "" },
        { id: "Fan stop", name: "风扇停止温度", value: "" },
        { id: "Fan Speed", name: "风扇转速阈值", value: "" },
        { id: "Acc slope", name: "箱体斜度阈值", value: "" },
        { id: "Acc shock", name: "箱体震动阈值", value: "" },
        { id: "trap ip", name: "上报IP", value: "" },
        { id: "trap port", name: "上报端口", value: "57125" },
      ],
    };
  },
  watch: {
    "$store.state.thingView.activeThing.tid": function (val) {
      this.handleReset();
    },
  },
  computed: {
    count() {
      return this.expand ? 18 : 7;
    },
  },
  updated() {
    console.log("updated");
  },
  created() {
    this.handleReset();
  },
  methods: {
    ctrl(id, toAll) {
      let params = {};
      for (let item of this.paramsCmd) {
        params[item.id] = item.value;
      }

      if (toAll) {
        params["ToAll"] = "ALL";
      }
      ctrlService(id, "SetConf", params)
        .then(() => {
          alert("成功");
        })
        .catch(() => {
          alert("设置失败");
        });
    },
    commit() {
      this.ctrl(this.$store.state.thingView.activeThing.tid);
    },
    commitAll() {
      this.ctrl(this.$store.state.thingView.activeThing.tid, true);
    },

    handleReset() {
      ctrlService(
        this.$store.state.thingView.activeThing.tid,
        "GetConf",
        null
      ).then((data) => {
        if (data) {
          for (let id in data.result) {
            this.paramsCmd.forEach((p, index) => {
              if (p.id == id) {
                p.value = data.result[id];
                this.$set(this.paramsCmd, index, p);
              }
            });
          }
        }
      });
    },

    toggle() {
      this.expand = !this.expand;
    },
  },
};
</script>
<style>
.ant-advanced-search-form {
  padding: 24px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
</style>